<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>TimePicker 时间选择器</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">

</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">任意时间点</el-divider><!-- =============================================================== -->
	<p class="desc">可以选择任意时间</p>
	<p class="desc">提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开arrow-control属性则通过界面上的箭头进行选择</p>
	<div class="example-basic">
		<el-time-picker v-model="value1" placeholder="Arbitrary time"></el-time-picker>&nbsp;
		<el-time-picker v-model="value2" arrow-control placeholder="Arbitrary time"></el-time-picker>
	</div>
	
	<el-divider content-position="left">限制时间选择范围</el-divider><!-- =============================================================== -->
	<p class="desc">您也可以限制时间选择范围。</p>
	<p class="desc">通过 disabledHours，disabledMinutes 和 disabledSeconds 限制可选时间范围</p>
	<div class="demo-basic">
		<el-time-picker v-model="value3" :disabled-hours="disabledHours" :disabled-minutes="disabledMinutes" :disabled-seconds="disabledSeconds" placeholder="选择时间"></el-time-picker>&nbsp;
		<el-time-picker v-model="value4" :disabled-hours="disabledHours" :disabled-minutes="disabledMinutes" :disabled-seconds="disabledSeconds" placeholder="选择时间" arrow-control></el-time-picker>
	</div>
	
	<el-divider content-position="left">任意时间范围</el-divider><!-- =============================================================== -->
	<p class="desc">可选择任意的时间范围</p>
	<p class="desc">添加is-range属性即可选择时间范围。 同样支持 arrow-control 属性。</p>
	<div class="demo-range">
		<el-time-picker v-model="value5" is-range range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间"></el-time-picker>&nbsp;
		<el-time-picker v-model="value6" is-range range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间" arrow-control></el-time-picker>
	</div>
	
</div>
</body>
<script>
const makeRange = (start, end) => {
	const result = []
	for (let i = start; i <= end; i++) {
		result.push(i)
	}
	return result
}
const Main = {
	data() {
		return {
			value: true,
			value1: '',
			value2: '',
			value3: new Date(2016, 9, 10, 18, 40),
			value4: new Date(2016, 9, 10, 18, 40),
			value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
			value6: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
		}
	},
	//实例挂载完成后被调用
	mounted(){
		this.$nextTick(function () {
			// 仅在整个视图都被渲染之后才会运行的代码
			// console.log("Start...");
			// console.log(makeRange(0, 16).concat([19,20]))
			console.log(new Date(2016, 9, 10, 18, 40));
			console.log(new Date(2000, 1, 1, 12, 0, 0));
		})
	},
	methods:{
		disabledHours() {
			return makeRange(0, 16).concat(makeRange(19, 23))
		},
		disabledMinutes(hour) {
			if (hour === 17) {
				return makeRange(0, 29)
			}
			if (hour === 18) {
				return makeRange(31, 59)
			}
		},
		disabledSeconds(hour, minute) {
			if (hour === 18 && minute === 30) {
				return makeRange(1, 59)
			}
		},
	},
}
const app = Vue.createApp(Main);
app.use(ElementPlus);
let vm = app.mount("#app");
// console.log(ElementPlus)
</script>
</html>
